<template>
    <div class="lybox">
        <div class="msg_box">
            <input type="text" placeholder="输入留言标题/内容关键字搜索" v-model="valueinp" />
            <button class="but" @click="sousuo">搜索</button>
            <button class="buts" @click="chongzhi">重置</button>
        </div>
        <div class="messig_box">
            <div class="messig" v-for="(item, index) in misg" :key="index">
                <div class="q1">
                    <div style="display: flex; align-items: flex-end">
                        <div>留言标题：</div>
                        <div class="hhh">
                            {{ item.title }}
                        </div>
                    </div>

                    <div class="hhhh">
                        {{ item.create_time }}
                    </div>
                </div>
                <div style="display: flex">
                    <div>留言内容：</div>
                    <div class="p2s" v-if="ad === index">
                        {{ item.content }}
                    </div>
                    <div class="p2" v-else>
                        {{ item.content }}
                    </div>
                </div>
                <div class="kai" v-show="item.content.length > 115">
                    <div @click.stop="zhankai(index)">{{ ad === index ? (sub = '收起') : (sub = '展开') }}</div>
                </div>
                <div class="q3">
                    {{ item.anonymous == 1 ? '' : item.user_dept }} {{ item.anonymous == 1 ? '匿名' : item.user_nickname
                    }}
                </div>
                <div style="display: flex">
                    <div style="color: #e02020">党内答复：</div>
                    <div class="huifus" v-if="add === index">
                        {{ item.reply }}
                    </div>
                    <div class="huifu" v-else>
                        {{ item.reply }}
                    </div>
                </div>
                <div class="kai" v-show="item.reply.length > 115">
                    <div @click.stop="zhankais(index)">{{ add === index ? (subb = '收起') : (subb = '展开') }}</div>
                </div>
            </div>
            <div class="qwwq">
                <div class="con_bom" v-if="!kong">
                    <div class="cc">共{{ total }}条</div>
                    <el-pagination v-model:page-size="pageSize" background layout="prev, pager, next" :total="total"
                        @next-click="nextclick" @prev-click="prevclick" @change="change1" />
                </div>
            </div>
            <div class="rq" v-show="kong">
                <img src="@/image/容器.svg" alt="" />
                <div>暂无信息</div>
            </div>
        </div>
        <div class="misg_mo">
            <div style="display: flex">
                <div class="titlewe">标题</div>
                <div>
                    <input type="text" placeholder="请输入你的标题" class="input" v-model="tit" />
                </div>
            </div>
            <div class="q4">
                <div class="titlewe">内容</div>
                <div>
                    <textarea name="" id="" class="wext" placeholder="请写下你的留言吧" v-model="lys"
                        maxlength="500"></textarea>
                </div>
            </div>
            <div class="kusng">
                <div style="display: flex; align-items: center">
                    <!-- <input type="checkbox" name="" id="myCheckbox" v-model="nms" :class="nms ? 'kactive' : ''">
                    <label class="niming">匿名</label> -->
                    <!-- <el-radio-group v-model="nms" class="ml-4">
                        <el-radio label="1" size="large">匿名</el-radio>
                    </el-radio-group> -->
                    <el-checkbox v-model="nms" label="匿名" size="large" />
                </div>
                <div>
                    <button class="send" @click="sendly">发送</button>
                </div>
            </div>
        </div>
        <div class="zhe" v-show="chaflag">
            <div class="zhao">
                <div class="biao">
                    <div style="cursor: pointer" @click="chaflag = false">X</div>
                </div>
                <div class="submt">
                    <h3>留言已提交，等待系统审核后展示</h3>
                    <button @click="chaflag = false">我知道了</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { message, message_add } from '@/api/team'
import { ElMessage } from 'element-plus';
import { computed, ref } from 'vue'

let chaflag = ref(false)
let kong = ref(false)
let misg = ref()
const valueinp = ref('')
let data: any = ref({
    page: 1,
    page_size: 7,
    self: 0,
    keyword: valueinp
})
const sousuo = async () => {
    data.value.keyword = valueinp.value
    await message(data.value).then(res => {
        misg.value = res.data.data.data
        total.value = res.data.data.total
    })
    if (misg.value == !{}) {
        kong.value = true
    } else {
        kong.value = false
    }
}
sousuo()
const chongzhi = () => {
    valueinp.value = ''
    messages()
}
const messages = async () => {
    await message(data.value).then(res => {
        misg.value = res.data.data.data
        total.value = res.data.data.total
        console.log(misg.value, 'liuyan')
    })
}
messages()
const tit = ref('')
const lys = ref('')
// computed(() => {
//     if (lys.value.length > 499) {
//         ElMessage.warning('内容需在500字之内')
//     }
//     return
// });
const nms: any = ref(false)
const sendly = async () => {
    if (tit.value == '') {
        // alert('请输入标题')
        ElMessage.warning('请输入标题')
    } else if (lys.value == '') {
        ElMessage.warning('请输入留言')
        // alert('请输入留言')

    } else {
        let aa = 0
        if (nms.value == false) {
            aa = 0
        } else if (nms.value == true) {
            aa = 1
        }
        let data: any = {
            title: tit.value,
            content: lys.value,
            anonymous: aa
        }
        await message_add(data).then(res => {
            console.log(res, 'qqqqqqqqqqqq')
            if (res.data.code == 0) {
                return ElMessage({
                    type: 'warning',
                    message: res.data.msg,
                })
            }
            tit.value = ''
            lys.value = ''
            nms.value = false
            chaflag.value = true
        })
        messages()
    }
}
const isExpanded = ref(false)
const isExpandeds = ref(false)
// const mychange = () => {
//     if (lys.value.length > 500) {
//         ElMessage.success('内容需在1000字内')
//         console.log(1)
//     } else {
//     }
// }
const total = ref(0)
const pageSize = ref(7)
const nextclick = async () => {
    data.value.page++
    messages()
    sousuo()
}
const prevclick = async () => {
    data.value.page--
    messages()
    sousuo()
}
const change1 = async (e: any) => {
    data.value.page = e
    messages()
    sousuo()
}
let sub = ref('展开')
let ad = ref(null)
const zhankai = (index: any) => {
    if (ad.value === index) {
        ad.value = null; // 点击已展开的内容时收起
    } else {
        ad.value = index; // 点击未展开的内容时展开
    }
}
let subb = ref('展开')
let add = ref(null)
const zhankais = (index: any) => {
    if (add.value === index) {
        add.value = null; // 点击已展开的内容时收起
    } else {
        add.value = index; // 点击未展开的内容时展开
    }
}
</script>

<style lang="scss" scoped>
.p2 {
    width: 945px;
    height: 65px;
    // background: olive;
    // background: olive;
    display: -webkit-box;
    /* 将元素视为块级盒子 */
    -webkit-line-clamp: 3;
    /* 控制显示的行数 */
    -webkit-box-orient: vertical;
    /* 设置文本排列方向为垂直 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分用省略号表示 */
    font-size: 16px;
    // line-height: 45px
    margin-top: -2px;
    word-wrap: break-word;
    word-break: break-all;
}

.con_bom {
    display: flex;
    justify-content: center;

    .cc {
        width: 100px;
        margin-top: 8px;
        text-align: center;
    }
}

.huifu {
    width: 945px;
    height: 65px;
    display: -webkit-box;
    /* 将元素视为块级盒子 */
    -webkit-line-clamp: 3;
    /* 控制显示的行数 */
    -webkit-box-orient: vertical;
    /* 设置文本排列方向为垂直 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分用省略号表示 */
    font-size: 16px;
    // line-height: 45px
    margin-top: -2px;
    word-wrap: break-word;
    word-break: break-all;
}

.p2s {
    width: 945px;
    // background: palegreen;
    font-size: 16px;
    // line-height: 45px;
    word-wrap: break-word;
    word-break: break-all;
}

.huifus {
    width: 945px;
    font-size: 16px;
    // line-height: 45px;
    word-wrap: break-word;
    word-break: break-all;
}

.kusng {
    display: flex;
    justify-content: space-between;
    width: 96%;
    margin-left: 4%;
    margin-top: 20px;
}

#myCheckbox {
    width: 16.75px;
    height: 20.72px;
    border-radius: 50% !important;
}

::v-deep .kactive {
    background-color: #e02020 !important;
}

/* 选中状态下的样式 */
// .niming input[type="checkbox"]:checked {
//     background-color: #E02020 !important;
//     /* 设置选中时的背景颜色 */
// }

.niming {
    margin-left: 5px;
    font-size: 18px;
    color: #e02020;
    // margin-top: 10px;
}

.titlewe {
    font-size: 14px;
    width: 45px;
    margin-top: 5px;
}

.wext {
    width: 940px;
    outline: none;
    height: 65px;
    font-size: 14px;
    border: solid #e5e5e5 2px;
    padding-left: 16px;
    padding-top: 6px;
}

.wext::placeholder {
    // padding: 2px;
    font-size: 14px;
}

.send {
    width: 100px;
    height: 40px;
    background: #e02020;
    border: none;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.misg_mo {
    width: 1030px;
    height: 202px;
    box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.5);
    background: #fff;
    font-size: 14px;
    font-weight: 800;
    padding: 15px;
    margin-left: 11px;
    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: -530px;
    // z-index: 1;

    .input {
        width: 940px;
        height: 32px;
        outline: none;
        border: solid #E5E5E5 2px;
        font-size: 14px;
        padding-left: 16px;
    }

    .input::placeholder {
        font-size: 14px;
        // padding-left: 3px;
    }

    .input::placeholder {
        font-size: 14px;
        // padding-left: 3px;
    }
}

.messig_box {
    width: 1059px;
    // background: palevioletred;
    // height: 70vh;
    // overflow: auto;
    margin-left: 1%;
    margin-top: 10px;
    background: #fff;
    color: #1a1a1a;
}

.messig {
    padding: 15px;
    border-bottom: 2px #e5e5e5 solid;

    .title {
        width: 150px;
        margin-top: 10px;
    }
}

.msg_box {
    width: 98%;
    height: 100px;
    background: #fff;
    margin-left: 1%;
    line-height: 100px;

    input {
        width: 70%;
        height: 40px;
        border: none;
        background: #f5f5f5;
        margin-left: 1%;
        padding: 0 30px;
        outline: none;
        border-radius: 10px;
    }

    input::placeholder {
        font-size: 16px;
    }

    .but {
        width: 96px;
        height: 40px;
        background: #e02020;
        border: none;
        margin-left: 2%;
        font-size: 16px;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
    }

    .buts {
        width: 96px;
        height: 40px;
        background: #fff;
        // border-color: #E02020;
        margin-left: 2%;
        font-size: 16px;
        color: #e02020;
        border-radius: 5px;
        border: solid 2px #e02020;
        cursor: pointer;
    }
}

.q1 {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.hhh {
    font-size: 16px;
    font-weight: 800;
}

.hhhh {
    font-size: 16px;
    // font-weight: 800;
}

.q3 {
    display: flex;
    justify-content: end;
    margin: 10px 0;
}

.q4 {
    display: flex;
    margin-top: 20px;
}

.neibu {
    width: 100%;
    height: 80vh;
    background: olive;
}

// @media (min-width: 2160px) {
//     .lybox {
//         width: 100%;
//         margin: 0 auto;
//         // background-color: #f0f0f0;
//     }
// }

// @media (max-width: 2159px) {
.lybox {
    width: 1080px;
    margin: 0 auto;
    // background-color: #f0f0f0;
}

// }

.zhe {
    width: 100%;
    height: 100vh;
    background: #000000a0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;

    .zhao {
        height: 254px;
        width: 608px;
        background: #fff;
        padding: 15px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -304px;
        margin-top: -250px;
        position: relative;
        overflow-y: auto;
        position: relative;

        .biao {
            display: flex;
            justify-content: end;
            padding: 20px 40px;
            font-size: 18px;
        }
    }
}

.submt {
    text-align: center;

    h3 {
        margin-top: 50px;
        font-size: 18px;
    }

    button {
        width: 157px;
        height: 40px;
        background: #e02020;
        border-radius: 25px;
        color: #fff;
        border: none;
        font-size: 16px;
        margin-top: 45px;
    }
}

.rq {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // margin-top: 100px;
    width: 100%;
    height: 100%;
    background: #fff;

    img {
        width: 228px;
        height: 226px;
    }
}

.qwwq {
    width: 100%;
    height: 285px;
    // background: palegreen;
}

.kai {

    display: flex;
    justify-content: end;
    cursor: pointer;
    color: red;

    div {
        width: 50px;
        text-align: right;
        // background: olive;
    }
}
</style>
